<template>
	<view class="calculatorBox">
		<view class="flex-column m-b2">
			<text class="titleText">铂钯铑单价(人民币/克)</text>
			<u-gap height="2" bg-color="#55aa7f" style="margin-bottom: 8px;"></u-gap>
			<horizontalForm :title1="'铂(PT)'" :titleValue1="platBid" :title2="'钯(PD)'" :titleValue2="pallBid" :color1="'#008bcb'" :color2="'#ea9c00'" @messageHandler="messageHandler"></horizontalForm>
			<horizontalForm :title1="'铑(RH)'" :titleValue1="rhodBid" :title2="'汇率'" :titleValue2="1" :color1="'#00aa7f'" @messageHandler="messageHandler"></horizontalForm>
		</view>
		<u-gap height="2" bg-color="#b9b9b9"></u-gap>
		<view class="flex-column m-t4 m-b2">
			<view class="flex-row m-b2" style="justify-content: space-around;">
				<text>项目</text>
				<text>数值</text>
				<text>单位</text>
			</view>
			<unitForm :title="'铂(PT)'" :unit="'ppm'" :color="'#008bcb'" @messageHandler="messageHandler" :type="'plat'" ref="child1"></unitForm>
			<unitForm :title="'钯(PD)'" :unit="'ppm'" :color="'#ea9c00'" @messageHandler="messageHandler" :type="'pall'" ref="child2"></unitForm>
			<unitForm :title="'铑(RH)'" :unit="'ppm'" :color="'#00aa7f'" @messageHandler="messageHandler" :type="'rhod'" ref="child3"></unitForm>
			<unitForm :title="'结算折扣'" :unit="' '" @messageHandler="messageHandler" :type="'discount'" :value2="'0.8'"></unitForm>
			<unitForm :title="'粉重'" :unit="'千克(kg)'" @messageHandler="messageHandler" :type="'weight'" ref="child4"></unitForm>
		</view>
		<view style="text-align: center;">
			<text class="priceText">价格 : {{price}} 元</text>
		</view>
		<view class="flex-column m-t4 m-b2">
			<view class="flex-row m-b2" style="justify-content: space-around;">
				<text style="color: #008bcb">铂(PT) : {{plat}} 元</text>
				<text style="color: #ea9c00">钯(PD) : {{pall}} 元</text>
				<text style="color: #00aa7f">铑(RH) : {{rhod}} 元</text>
			</view>
		</view>
		<view class="flex-row m-t4 m-b4" style="justify-content: space-around;">
			<u-button type="success" size="medium" @click="draftQuotation">暂存报价</u-button>
			<u-button type="warning" size="medium" @click="empty">清空</u-button>
		</view>
		<u-gap height="2" bg-color="#b9b9b9"></u-gap>
		<u-table class="m-t2 m-b2" border-color="#ffffff">
			<u-tr class="u-tr">
				<u-th class="u-th">粉重</u-th>
				<u-th class="u-th">铂含量</u-th>
				<u-th class="u-th">钯含量</u-th>
				<u-th class="u-th">铑含量</u-th>
				<u-th class="u-th">含量价</u-th>
				<u-th class="u-th">折扣价</u-th>
				<u-th class="u-th">操作</u-th>
			</u-tr>
			<u-tr class="u-tr" v-for="(item,index) in draftQuotationData" :key="index">
				<u-td class="u-td">{{item.weight}}</u-td>
				<u-td class="u-td">{{item.plat}}</u-td>
				<u-td class="u-td">{{item.pall}}</u-td>
				<u-td class="u-td">{{item.rhod}}</u-td>
				<u-td class="u-td">{{item.contentPrice}}</u-td>
				<u-td class="u-td">{{item.discountPrice}}</u-td>
				<u-td class="u-td"><u-icon name="close-circle" size="32" style="margin-left: 13px;" @click="removeSaved(index)"></u-icon></u-td>
			</u-tr>
		</u-table>
	</view>
</template>

<script>
	import horizontalForm from '../../components/horizontalForm/horizontalForm'
	import unitForm from '../../components/unitForm/unitForm'
	export default {
		data() {
			return {
				draftQuotationData: [],
				price: 0,
				plat: 0,
				pall: 0,
				rhod: 0,
				platBid: 0,
				pallBid: 0,
				rhodBid: 0,
				tempPlat: 0,
				tempPall: 0,
				tempRhod: 0,
				tempDiscount: 0.8,
				tempWeight: 0,
				platUnit: 0,
				pallUnit: 0,
				rhodUnit: 0,
				value: 0,
				emptyState: false,
				blankStr: ''
			}
		},
		onLoad() {
			let unitPrice = wx.getStorageSync('unitPrice');
			this.platBid = unitPrice.platBid;
			this.pallBid = unitPrice.pallBid;
			this.rhodBid = unitPrice.rhodBid;
			this.platUnit = unitPrice.platBid;
			this.pallUnit = unitPrice.pallBid;
			this.rhodUnit = unitPrice.rhodBid;
			this.draftQuotationData = wx.getStorageSync('draftQuotationData');
			if(this.draftQuotationData == "") {
				this.draftQuotationData = [];
			}
			this.onShareAppMessage();
			this.onShareTimeline();
			this.$forceUpdate();
		},
		components: {
			horizontalForm,
			unitForm
		},
		methods: {
			messageHandler(response) {
				var value = response.value;
				if(response == 0) {
					this.tempPlat = 0;
					this.tempPall = 0;
					this.tempRhod = 0;
					this.tempWeight = 0;
				}
				switch(response.type) {
					case 'plat':
						this.tempPlat = value;
						break;
					case 'pall':
						this.tempPall = value;
						break;
					case 'rhod':
						this.tempRhod = value;
						break;
					case 'discount':
						this.tempDiscount = value;
						break;
					case 'weight':
						this.tempWeight = value;
						break;
					case '铂(PT)':
						this.platUnit = response.value1;
						break;
					case '钯(PD)':
						this.pallUnit = response.value2;
						break;
					case '铑(RH)':
						this.rhodUnit = response.value1;
						break;
				}
				this.toCount();
			},
			toCount() {
				let d = parseFloat(this.tempDiscount);
				let w = parseFloat(this.tempWeight);
				this.plat = Math.round(parseFloat(this.tempPlat) / 1000 * parseFloat(this.platUnit) * d * w);
				this.pall = Math.round(parseFloat(this.tempPall) / 1000 * parseFloat(this.pallUnit) * d * w);
				this.rhod = Math.round(parseFloat(this.tempRhod) / 1000 * parseFloat(this.rhodUnit) * d * w);
				this.price = Math.round(this.plat + this.pall + this.rhod);
			},
			draftQuotation() {
				let obj = {};
				obj.weight = this.tempWeight;
				obj.plat = this.tempPlat;
				obj.pall = this.tempPall;
				obj.rhod = this.tempRhod;
				obj.contentPrice = this.price/0.8;
				obj.discountPrice = this.price;
				this.draftQuotationData.push(obj);
				wx.setStorageSync('draftQuotationData',this.draftQuotationData);
			},
			empty() {
				this.messageHandler(0);
				this.$refs.child1.clear();
				this.$refs.child2.clear();
				this.$refs.child3.clear();
				this.$refs.child4.clear();
			},
			removeSaved(index) {
				this.draftQuotationData = this.draftQuotationData.filter((v, k) => k != index);
				wx.setStorageSync('draftQuotationData',this.draftQuotationData);
			},
			onShareAppMessage() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			},
			onShareTimeline() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			}
		}
	}
</script>

<style>
	@import url("../../common/css/calculator.css");
	
</style>
